<aside class="sidebar">
  <div class="sidebar__header">
    <ng-content></ng-content>
    <div class="sidebar__filter">
      <div class="sidebar__filter-label"></div>
      <hydro-icon class="sidebar__filter-icon" type="icon-search"></hydro-icon>
      <input
        class="sidebar__filter-input"
        type="text"
        (input)="handleFilter($event.target.value)"
      />
    </div>
  </div>
  <ng-container *ngIf="!isEmpty; else message">
    <div class="sidebar__list">
      <div
        class="sidebar__item"
        *ngFor="let item of sidebarData"
        (click)="handleClick(item)"
        [ngClass]="{ 'sidebar__item--selected': selectedItem === item }"
      >
        <hydro-icon
          type="bookmark"
          class="sidebar__item-bookmark"
          (click)="toggleBookmark(item)"
          [ngClass]="{ 'sidebar__item-bookmark--selected': item.favorite }"
        ></hydro-icon>
        <span class="sidebar__item-name">{{ item.name }}</span>
        <span *ngIf="item.status" class="sidebar__item-status">
          <hs-application-status [status]="item.status"></hs-application-status>
        </span>
      </div>
    </div>
  </ng-container>
</aside>

<ng-template #message>
  <div class="sidebar__message">list is empty</div>
</ng-template>
